<template>
	<view>
		<view class="tittlebox">
		<u-tabs  :list="list4" lineWidth="30" lineColor="#f56c6c" :activeStyle="{
		                color: '#303133',
		                fontWeight: 'bold',
		                transform: 'scale(1.05)'
		            }" :inactiveStyle="{
		                color: '#606266',
		                transform: 'scale(1)'
		            }" itemStyle="padding-left: 15px; padding-right: 15px; height: 40px;" @change="change">
		</u-tabs>
		</view>
		<view v-if="current==0">
			<view class="box">
				<text class="textList">{{index}}歌单</text>
				<uni-icons type="forward" size="15"></uni-icons>
				<scroll-view scroll-x="true" class="sc1">
					<view class="songListMap">
						<view class="songListItem">
							<view class="list1" v-for="item in slists" :key="item.listId" @tap="toSongList(item.listId)">
								<view class="list1Pho">
									<image :src="item.listPhoto" class="listItem"></image>
								</view>
								<view>
									<text class="listTex">{{item.listTittle}}</text>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<u-divider lineColor="#bfbec0" hairline="false"></u-divider>
			</view>
			<view>
				<view class="jinxuan">
					<text class="textList" style="font-size: 34rpx;">{{index}}音乐</text>
					<uni-icons type="forward" size="15"></uni-icons>
				</view>
				<scroll-view scroll-x="true" class="sc1">
					<view class="listMap">
						<view class="listInfo">
							<view class="info" v-for="item in songs" :key="item.songId" @tap="toRadio(item.songId)">
								<view>
									<image :src="item.songPhoto" class="imageSong"></image>
								</view>
								<view class="songInfo">
									<view class="song">{{item.songName}}</view>
									<view class="singer">{{item.singerName}}</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<u-divider lineColor="#bfbec0" hairline="false"></u-divider>
			</view>
		</view>
		<view v-if="current==1">
			<view class="box">
				<text class="textList">{{index}}歌单</text>
				<uni-icons type="forward" size="15"></uni-icons>
				<scroll-view scroll-x="true" class="sc1">
					<view class="songListMap">
						<view class="songListItem">
							<view class="list1" v-for="item in slists" :key="item.listId" @tap="toSongList(item.listId)">
								<view class="list1Pho">
									<image :src="item.listPhoto" class="listItem"></image>
								</view>
								<view>
									<text class="listTex">{{item.listTittle}}</text>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<u-divider lineColor="#bfbec0" hairline="false"></u-divider>
			</view>
			<view>
				<view class="jinxuan">
					<text class="textList" style="font-size: 34rpx;">{{index}}音乐</text>
					<uni-icons type="forward" size="15"></uni-icons>
				</view>
				<scroll-view scroll-x="true" class="sc1">
					<view class="listMap">
						<view class="listInfo">
							<view class="info" v-for="item in songs" :key="item.songId" @tap="toRadio(item.songId)">
								<view>
									<image :src="item.songPhoto" class="imageSong"></image>
								</view>
								<view class="songInfo">
									<view class="song">{{item.songName}}</view>
									<view class="singer">{{item.singerName}}</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<u-divider lineColor="#bfbec0" hairline="false"></u-divider>
			</view>
		</view>
		<view v-if="current==2" >
			<view class="box">
				<text class="textList">{{index}}歌单</text>
				<uni-icons type="forward" size="15"></uni-icons>
				<scroll-view scroll-x="true" class="sc1">
					<view class="songListMap">
						<view class="songListItem">
							<view class="list1" v-for="item in slists" :key="item.listId" @tap="toSongList(item.listId)">
								<view class="list1Pho">
									<image :src="item.listPhoto" class="listItem"></image>
								</view>
								<view>
									<text class="listTex">{{item.listTittle}}</text>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<u-divider lineColor="#bfbec0" hairline="false"></u-divider>
			</view>
			<view>
				<view class="jinxuan">
					<text class="textList" style="font-size: 34rpx;">{{index}}音乐</text>
					<uni-icons type="forward" size="15"></uni-icons>
				</view>
				<scroll-view scroll-x="true" class="sc1">
					<view class="listMap">
						<view class="listInfo">
							<view class="info" v-for="item in songs" :key="item.songId" @tap="toRadio(item.songId)">
								<view>
									<image :src="item.songPhoto" class="imageSong"></image>
								</view>
								<view class="songInfo">
									<view class="song">{{item.songName}}</view>
									<view class="singer">{{item.singerName}}</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<u-divider lineColor="#bfbec0" hairline="false"></u-divider>
			</view>
		</view>
		<view v-if="current==3">
			<view class="box">
				<text class="textList">{{index}}歌单</text>
				<uni-icons type="forward" size="15"></uni-icons>
				<scroll-view scroll-x="true" class="sc1">
					<view class="songListMap">
						<view class="songListItem">
							<view class="list1" v-for="item in slists" :key="item.listId" @tap="toSongList(item.listId)">
								<view class="list1Pho">
									<image :src="item.listPhoto" class="listItem"></image>
								</view>
								<view>
									<text class="listTex">{{item.listTittle}}</text>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<u-divider lineColor="#bfbec0" hairline="false"></u-divider>
			</view>
			<view>
				<view class="jinxuan">
					<text class="textList" style="font-size: 34rpx;">{{index}}音乐</text>
					<uni-icons type="forward" size="15"></uni-icons>
				</view>
				<scroll-view scroll-x="true" class="sc1">
					<view class="listMap">
						<view class="listInfo">
							<view class="info" v-for="item in songs" :key="item.songId" @tap="toRadio(item.songId)">
								<view>
									<image :src="item.songPhoto" class="imageSong"></image>
								</view>
								<view class="songInfo">
									<view class="song">{{item.songName}}</view>
									<view class="singer">{{item.singerName}}</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<u-divider lineColor="#bfbec0" hairline="false"></u-divider>
			</view>
		</view>
		<view v-if="current==4">
			<view class="box">
				<text class="textList">{{index}}歌单</text>
				<uni-icons type="forward" size="15"></uni-icons>
				<scroll-view scroll-x="true" class="sc1">
					<view class="songListMap">
						<view class="songListItem">
							<view class="list1" v-for="item in slists" :key="item.listId" @tap="toSongList(item.listId)">
								<view class="list1Pho">
									<image :src="item.listPhoto" class="listItem"></image>
								</view>
								<view>
									<text class="listTex">{{item.listTittle}}</text>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<u-divider lineColor="#bfbec0" hairline="false"></u-divider>
			</view>
			<view>
				<view class="jinxuan">
					<text class="textList" style="font-size: 34rpx;">{{index}}音乐</text>
					<uni-icons type="forward" size="15"></uni-icons>
				</view>
				<scroll-view scroll-x="true" class="sc1">
					<view class="listMap">
						<view class="listInfo">
							<view class="info" v-for="item in songs" :key="item.songId" @tap="toRadio(item.songId)">
								<view>
									<image :src="item.songPhoto" class="imageSong"></image>
								</view>
								<view class="songInfo">
									<view class="song">{{item.songName}}</view>
									<view class="singer">{{item.singerName}}</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<u-divider lineColor="#bfbec0" hairline="false"></u-divider>
			</view>
		</view>
		<view v-if="current==5">
			<view class="box">
				<text class="textList">{{index}}歌单</text>
				<uni-icons type="forward" size="15"></uni-icons>
				<scroll-view scroll-x="true" class="sc1">
					<view class="songListMap">
						<view class="songListItem">
							<view class="list1" v-for="item in slists" :key="item.listId" @tap="toSongList(item.listId)">
								<view class="list1Pho">
									<image :src="item.listPhoto" class="listItem"></image>
								</view>
								<view>
									<text class="listTex">{{item.listTittle}}</text>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<u-divider lineColor="#bfbec0" hairline="false"></u-divider>
			</view>
			<view>
				<view class="jinxuan">
					<text class="textList" style="font-size: 34rpx;">{{index}}音乐</text>
					<uni-icons type="forward" size="15"></uni-icons>
				</view>
				<scroll-view scroll-x="true" class="sc1">
					<view class="listMap">
						<view class="listInfo">
							<view class="info" v-for="item in songs" :key="item.songId" @tap="toRadio(item.songId)">
								<view>
									<image :src="item.songPhoto" class="imageSong"></image>
								</view>
								<view class="songInfo">
									<view class="song">{{item.songName}}</view>
									<view class="singer">{{item.singerName}}</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<u-divider lineColor="#bfbec0" hairline="false"></u-divider>
			</view>
		</view>
		<view>
			<TabBar currentTab="cart" ></TabBar>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list4: [{
					name: '民谣'
				}, {
					name: '轻音乐',
				}, {
					name: '流行',
				}, {
					name: '说唱'
				}, {
					name: '爵士'
				}, {
					name: '摇滚'
				}],
				current: 0,
				src: "http://rrrlkahbf.hb-bkt.clouddn.com/photo/%E7%BD%B2%E5%89%8D%E8%A1%97%E5%B0%91%E5%B9%B4.jpg",
				songs: [],
				slists: [],
				index:"民谣"
			};
		},
		methods: {
			change(index) {
				// this.current = index;
				this.current = index.index;
				this.songs=[]
				this.slists=[]
				this.index=index.name
				this.getInfo(index.index)
			},
			async getInfo(item) {
				// console.log(item);
				const {
					data: res
				} = await uni.$http.get("/cart/find?id=" + item);
				// console.log(res);
				this.songs = res.data.songs
				this.slists = res.data.slists
				// console.log(this.slists);
			},
			toSongList(item){
				uni.navigateTo({
					url:"/subpkg/toSongList/toSongList?listId="+item
				})
			},
			toRadio(item){
				uni.navigateTo({
					url:"/pages/mus/mus?songId="+item
				})
			}
		},
		onLoad() {
			this.getInfo(0);
		},
		onPullDownRefresh() {
			this.getInfo(0);
			uni.stopPullDownRefresh()
		}

	}
</script>

<style lang="scss">
	.textList {
		font-weight: 600;
		margin-top: 40rpx;
		margin-left: 35rpx;
		margin-right: 20rpx;
		font-size: 34rpx;
	}

	.listItem {
		width: 250rpx;
		height: 250rpx;
		border-radius: 15%;
		box-shadow: 10rpx 10rpx 10rpx rgba(0, 0, 0, .2);
	}

	.songListItem{
			display: flex;
			flex-flow: wrap column;
			height: 780rpx;
	}
	.list1 {
		margin: 20rpx;
		display: inline-block;
		width: 250rpx;
	}

	.box {
		margin-top: 20rpx;
	}

	.listTex {
		width: 100%;
		font-size: 24rpx;
		// word-wrap: break-word;
		// word-break: normal;
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: pre-wrap;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		margin-top: 20rpx;
		font-weight: 550;
	}

	.tittle {
		font-size: 40px;
	}
	
	.jinxuan {
		margin: 20rpx;
	}

	.songListMap {
		display: flex;

		.songListItem {
			// display: flex;
		}
	}

	.sc1 {
		white-space: nowrap;
		margin-bottom: 0rpx;
	}

	.jinxuan {
		margin: 20rpx;
	}

	.listMap {
		display: flex;

		.listInfo {
			display: flex;
			flex-flow: column wrap;
			margin: 30rpx;
			margin-bottom: 10rpx;
			height: 940rpx;

			.info {
				display: flex;
				margin: 8rpx;

				.imageSong {
					width: 160rpx;
					height: 160rpx;
					border-radius: 15%;
					box-shadow: 10rpx 10rpx 10rpx rgba(0, 0, 0, .2);
				}

				.songInfo {
					margin-left: 30rpx;
					padding-left: 30rpx;
					margin-top: 20rpx;
					margin-right: 200rpx;

					.song {
						font-size: 34rpx;
						font-weight: 600;
					}

					.singer {
						color: gray;
					}
				}
			}
		}
	}
	.tittlebox {
		//设置吸顶效果
		position: sticky;
		//吸顶位置
		top: 0;
		//提高层级
		z-index: 999;
		background-color: #f0f0f0;
	}
</style>
